@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  overflow-x: hidden;
  font-family: 'Montserrat', sans-serif;
}
html {
  scroll-behavior: smooth;
}
li {
  list-style: none;
  font-family: 'Montserrat', sans-serif;
}
a {
  text-decoration: none;
}
h1,
p,
h2,
h3 {
  font-family: 'Montserrat', sans-serif;
}
/* .container {
    display: flex;
    flex-direction: column;
} */
/* LOADING STYLE */
body {
  overflow: hidden;
}
.loader img {
  width: 5%;
}

.loader {
  font-weight: 500;
  font-size: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: white;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
}

/* NAVIGASI OPEN */
nav.sqr {
  display: none;
}
nav {
  padding-left: 115px;
  padding-right: 115px;
  margin-top: 5vh;
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.nav.Active {
  background-color: white;
  color: #000000;
  position: fixed;
  z-index: 5;
  right: 0;
  left: 0;
  top: 0;
  margin-top: 0;
  padding-top: 25px;
  -webkit-box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.1);
          box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.nav.Active a,
.nav.Active ul {
  color: #000000;
}
.nav.Active.on ul,
.nav.Active.on a {
  color: white;
}
.nav.Active.on {
  color: white;
  background-color: transparent;
}
.nav.Active.on.op {
  background-color: white;
  color: #000000;
}
.nav.Active.on.op a,
.nav.Active.on.op ul {
  color: #000000;
}

.navDs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.navMob,
.navSideMobile {
  display: none;
}
ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
ul.list-menu {
  display: -ms-grid;
  display: grid;
  gap: 18px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-grid-columns: auto 18px auto 18px auto 18px auto 18px auto 18px auto;
  grid-template-columns: auto auto auto auto auto auto;
}
nav ul {
  font-size: 18px;
  font-weight: 700;
  color: white;
}
nav ul:nth-child(n + 4) {
  display: none;
}
nav a {
  color: white;
}
nav ul:nth-child(2) li:hover,
nav a:hover {
  color: #01810a;
  cursor: pointer;
}

.logo {
  display: -ms-inline-grid;
  display: inline-grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-grid-columns: 60px 6px auto;
  grid-template-columns: 60px auto;
}
.logo li:first-child img {
  width: 100%;
  overflow-x: hidden;
}
.logo li:first-child {
  width: 100%;
  margin-right: 16px;
}

.logo li {
  font-size: 24px;
  font-weight: 700;
}
.btn {
  background-color: #01810a;
  color: white;
  width: 132px;
  height: 42px;
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.btn:hover {
  background-color: transparent;
  border: 2px solid #01810a;
  cursor: pointer;
}
.menu {
  display: none;
}
/* NAVIGASI CLOSE */

/* ATTENTION OPEN */
.att {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background-image: url(Image/att.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  -webkit-animation: attDes 15s 3s infinite both;
          animation: attDes 15s 3s infinite both;
}
@-webkit-keyframes attDes {
  0% {
    background-image: url(Image/att.png);
  }
  25% {
    background-image: url(Image/att.png);
  }
  50% {
    background-image: url(Image/attDes2.png);
  }
  75% {
    background-image: url(Image/attDes2.png);
  }
  100% {
    background-image: url(Image/att.png);
  }
}
@keyframes attDes {
  0% {
    background-image: url(Image/att.png);
  }
  25% {
    background-image: url(Image/att.png);
  }
  50% {
    background-image: url(Image/attDes2.png);
  }
  75% {
    background-image: url(Image/attDes2.png);
  }
  100% {
    background-image: url(Image/att.png);
  }
}
.attContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

.contAtt h1 {
  text-align: center;
  color: white;
  margin-bottom: 32px;
  line-height: 65px;
  font-size: 48px;
  font-weight: 600;
}
.contAtt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

button.L:hover {
  color: #01810a;
}
/* ATTENTION CLOSE */

/* WHY CHOOSE US OPEN */

.whyCU {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.whyCU h1 {
  font-weight: 700;
  margin-top: 120px;
  font-size: 40px;
  line-height: 65px;
}

/* IMG WHYCHOOSEUS OPEN */
/* GRUP SAFETY IMG */
.oneS {
  background-image: linear-gradient(90deg, #000000 -53.68%, rgba(0, 0, 0, 0) 83.54%),url(Image/safety1.png);
  /* left: 0
        transition: 1s; */
}
.twoS {
  background-image: linear-gradient(90deg, #000000 -53.68%, rgba(0, 0, 0, 0) 83.54%),url(Image/safety2.png);
}

/* GRUP QUALITY IMG */
.oneQ {
  background-image: linear-gradient(90deg, #000000 -53.68%, rgba(0, 0, 0, 0) 83.54%),url(Image/quality1.png);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.twoQ {
  background-image: linear-gradient(90deg, #000000 -53.68%, rgba(0, 0, 0, 0) 83.54%),url(Image/quality2.png);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.thirdQ {
  background-image: linear-gradient(90deg, #000000 -53.68%, rgba(0, 0, 0, 0) 83.54%),url(Image/quality3.png);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
/* GRUP EFFICIENCY IMG */
.oneE {
  background-image: url(Image/efisien1.png);
}
.twoE {
  background-image: linear-gradient(90deg, #000000 -53.68%, rgba(0, 0, 0, 0) 83.54%),url(Image/efisien2.png);
}
/* GRUP TEXT DEFAULT*/
.contSafety {
  margin-left: 115px;
}
.contSafety .Txt,
.contSafety .TxtQ,
.contSafety .TxtE {
  font-weight: 600;
  font-size: 24px;
  line-height: 44px;
  color: #fffefe;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

.Txt.on,
.TxtQ.on,
.TxtE.on {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.whImg .safetyImg,
.whImg .safetyImgQ,
.whImg .safetyImgE {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}
.safetyImg {
  z-index: 2;
}
.safetyImgQ {
  z-index: 1;
}
.safetyImgE {
  z-index: -1;
}
.fade {
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.whImg {
  overflow: hidden;
  position: relative;
  height: 65%;
  width: 100%;
}
/* IMG WHYCHOOSEUS CLOSE */
.arrowDot div,
.arrowDotQ div,
.arrowDotE div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 2vh;
  width: 10px;
  height: 10px;
  border-top: 4px solid rgb(255, 255, 255);
  border-left: 4px solid rgb(255, 255, 255);
  cursor: pointer;
}
.dotClub {
  margin-top: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.arrowDot div,
.arrowDotQ div,
.arrowDotE div {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
/* SPESIAL FUNCTION DOT */
.dot,
.dotQ,
.dotE {
  width: 28px;
  height: 28px;
  opacity: 0.4;
  margin-right: 5px;
  margin-left: 5px;
  background-color: rgb(82, 82, 82);
  border-radius: 20px;
}
.dot.Active,
.dotQ.Active,
.dotE.Active {
  opacity: 10;
  background-color: #3c9b24;
}
.arrowDot:last-child div,
.arrowDotQ:last-child div,
.arrowDotE:last-child div {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
      transform: rotate(135deg);
}
.arrowDot,
.arrowDotQ,
.arrowDotE {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border-radius: 100%;
  overflow: hidden;
  background-color: #01810a;
  cursor: pointer;
}
/* UNTUK TEXTNYA JUDUL WHYCU */
.whyCU ul {
  margin-bottom: 4px;
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.whyCU li {
  font-weight: 600;
  font-size: 32px;
  line-height: 44px;
  cursor: pointer;
}
.liQ,
.liE {
  opacity: 0.4;
}
.whyCU li:nth-child(n + 1) {
  margin-right: 18px;
}
/* UNTUK UNDERLINENYA */
.underL {
  width: 70px;
  height: 4px;
  background-color: #01810a;
  position: relative;
  left: -172px;
  margin-bottom: 24px;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.underL.qua {
  left: -40px;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.underL.eff {
  left: 125px;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
/* UNTUK FUNGSI JUDUL WHYCU */
.liS.qua,
.liE.qua {
  opacity: 0.3;
}
.liQ.qua {
  opacity: 10;
}
.liE.eff {
  opacity: 10;
}
.liS.eff,
.liQ.eff {
  opacity: 0.4;
}

/* SOME BASIC METHOD */
.arrowDotBasic div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 2vh;
  width: 10px;
  height: 10px;
  border-top: 4px solid rgb(255, 255, 255);
  border-left: 4px solid rgb(255, 255, 255);
  cursor: pointer;
}
.arrowDotBasic div {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
.arrowDotBasic:last-child div {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
      transform: rotate(135deg);
}
.arrowDotBasic {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border-radius: 50px;
  overflow: hidden;
  background-color: #01810a;
  cursor: pointer;
}
.dotClubBasic {
  margin-top: 36px;
  padding-bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.dotBasic {
  width: 28px;
  height: 28px;
  opacity: 0.4;
  margin-right: 5px;
  margin-left: 5px;
  background-color: rgb(82, 82, 82);
  border-radius: 20px;
}
.dotBasic.Active {
  opacity: 10;
  background-color: #3c9b24;
}

/* FUNCTION WHY CHOOSE US CLOSE */
/* WHY CHOOSE US CLOSE */
/* OUR PRODUCT OPEN */

.container-all-product {
  display: -ms-grid;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-grid-columns: 20% 2vw 20% 2vw 20% 2vw 20%;
  grid-template-columns: 20% 20% 20% 20%;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  gap: 2vw;
  margin: 60px 0px;
}

.container-all-product > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.container-all-product > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.container-all-product > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.container-all-product > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

.our-product {
  margin: 60px 0px;
  text-align: center;
}
.our-product h2{
  text-align: center;
  font-size: 40px;
}
.img-product {
  border-radius: 15px;
  color: white;
  height: 99%;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  cursor: pointer;
}

.img-product::before {
  content: "";
  position: absolute;
  top: 80%;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.452);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.img-product.tiv::before {
  top: 0%;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.img-product img {
  width: 100%;
}
.text-in h3 {
  text-align: center;
  margin-bottom: 8px;
  font-size: 24px;
  margin-top: 5%;
}
.text-in {
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 22px;
  width: 100%;
  top: 73%;
  right:0;
  left: 0;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: absolute;
  font-size: 14px;
  line-height: 28px;
}
.text-in.tiv {
  top: 2%;
}
 /*IMAGE EQUIPMENT*/
 .bg{
  display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
             justify-content: center;
 }
 .equip-img {
    width: 80%;
    
}

/* GLOBAL NETWORK COMAPNY */
.glbCont {
  color: white;
  background-color: #262626;
}
.glbCont h1 {
  text-align: center;
  font-size: 40px;
  padding-top: 130px;
}
.contGlbImgMob {
  width: 0%;
  height: 0%;
}
.contGlbImgDes {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #262626;
  overflow: auto;
}
.contGlbImgDes .glbImg {
  background-color: #262626;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.contGlbImgDes .glbImg svg {
  width: 75%;
  fill: white;
}
/* Tulisannya  */
.glbContent {
  padding-left: 115px;
  padding-right: 115px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #262626;
  z-index: 1;
  position: relative;
}
.glbContent {
  margin-top: -180px;
  padding-top: 20px;
  padding-bottom: 50px;
}
.glbContent ul {
  padding-bottom: 56px;
}
.glbContent div {
  color: white;
  font-size: 32px;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
}
.glbContent div:first-child {
  margin-right: 40px;
}
.glbContent ul div:last-child {
  margin-left: 40px;
}
.underGlbImg {
  border-radius: 2%;
  margin-top: 8px;
  width: 59%;
  height: 6px;
}
.glbContent ul div:first-child .underGlbImg {
  background-color: #24549b;
}
.glbContent ul div:nth-child(2n) .underGlbImg {
  background-color: #a51313;
}
.glbContent ul div:last-child .underGlbImg {
  background-color: #3c9b24;
}
.contGlbImgDes .zoomGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 3;
}
.contGlbImgDes .zoomPlus button,
.contGlbImgDes .zoomMin button {
  width: 80px;
  height: 50px;
  border: none;
  background-color: #454545;
  -webkit-box-shadow: 0px 4px 25px rgba(255, 255, 255, 0.13);
          box-shadow: 0px 4px 25px rgba(255, 255, 255, 0.13);
}
.red.on {
  -webkit-animation-name: cired;
          animation-name: cired;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.blue.on {
  -webkit-animation-name: ciblue;
          animation-name: ciblue;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.green.on {
  -webkit-animation-name: cigreen;
          animation-name: cigreen;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
@-webkit-keyframes cired {
  10% {
    fill: #a51313;
  }
  40% {
    fill: #a51313;
  }
  100% {
    fill: white;
  }
}
@keyframes cired {
  10% {
    fill: #a51313;
  }
  40% {
    fill: #a51313;
  }
  100% {
    fill: white;
  }
}
@-webkit-keyframes ciblue {
  10% {
    fill: #24549b;
  }
  40% {
    fill: #24549b;
  }
  100% {
    fill: white;
  }
}
@keyframes ciblue {
  10% {
    fill: #24549b;
  }
  40% {
    fill: #24549b;
  }
  100% {
    fill: white;
  }
}
@-webkit-keyframes cigreen {
  10% {
    fill: #3c9b24;
  }
  40% {
    fill: #3c9b24;
  }
  100% {
    fill: white;
  }
}
@keyframes cigreen {
  10% {
    fill: #3c9b24;
  }
  40% {
    fill: #3c9b24;
  }
  100% {
    fill: white;
  }
}
.zoomMin img,
.zoomPlus img {
  width: 40%;
}
.contGlbImgDes .zoomPlus button {
  border-radius: 0px 8px 8px 0px;
}
.contGlbImgDes .zoomMin button {
  border-radius: 8px 0px 0px 8px;
}
/* some */
.bsicMob {
  display: none;
}
.bsicDes {
  text-align: center;
  font-weight: 700;
  font-size: 40px;
  line-height: 75px;
  margin-bottom: 32px;
}
.Bsic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 180px;
}
.Bsic ul li {
  font-weight: 600;
  font-size: 32px;
  line-height: 34px;
  cursor: pointer;
}
.Bsic ul li:nth-child(2) {
  margin-left: 88px;
  margin-right: 88px;
}
.Bsic .ListBsic {
  margin-bottom: 38px;
}
.imgAndContent {
  overflow: hidden;
  position: relative;
}
.imgAndContent img {
  width: 26.5%;
  border-radius: 8px;
}
.imgAndContent p {
  font-weight: 500;
  font-size: 24px;
  line-height: 56px;
  margin-right: 0;
}
.imgAndContent p > span {
  font-weight: 600;
  font-size: 24px;
}
.oI.orderThree span {
  width: 20px;
  height: 2px;
  background-color: #000000;
}
.oI div,
.Dl div,
.iP div {
  margin-left: 120px;
  width: 40%;
}
.sqr.on {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background-color: white;
  z-index: 9;
}
.Dl div {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-left: 0px;
}
.DeliveryTwo div {
  overflow: hidden;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.DeliveryTwo div .btn {
  margin-top: 30px;
}
.Dl div img {
  width: 60%;
}
.Bsic li:nth-child(n + 2) {
  opacity: 0.3;
}
.iP,
.Dl,
.oI {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.imgAndContent > div {
  background-color: white;
  width: 100%;
  display: inline-block;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}
.imgAndContent > div:nth-child(n + 2) {
  display: none;
}
.imgAllOrder {
  z-index: 4;
}
.imgAllDelivery {
  z-index: 3;
}
.imgAllPackaging {
  z-index: 2;
}
.underLBDes {
  position: relative;
  margin-top: 8px;
  left: 12px;
  width: 70px;
  height: 6px;
  background-color: #01810a;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
/* FOOTER */
.footer {
  color: white;
  background-color: #4b4b4b;
  margin-top: 180px;
}
.footer a {
  color: white;
}
.footer > div {
  margin-left: 115px;
  margin-right: 115px;
  padding-top: 124px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.footer .group1 > div > div {
  overflow: hidden;
  height: 40px;
  border-bottom: 1px solid white;
  width: 100%;
  margin-top: 20px;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  cursor: pointer;
}
.footer .group1 > div > div.on {
  height: 130px;
}
.footer .logo li {
  font-size: 18px;
}
.footer .group1 > div > div > ul > li {
  font-size: 14px;
}
.footer .group1 > div > div > ul > li:nth-child(2) {
  margin-top: 8px;
  margin-bottom: 8px;
}
.footer .group1 > div > div > ul {
  margin-top: 16px;
  margin-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.footer .group1 h3 {
  font-size: 20px;
}
.logo.Tab {
  display: none;
}
.group1 {
  margin-right: 56px;
}
.group1 .logo li:first-child {
  width: 41px;
}
/* (footer arrow) */
.footer > div > div:first-child {
  margin-top: 32px;
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}
.footer > div > div > ul > li {
  margin-top: 4px;
}
.footer > div > div > div > div > div {
  margin-right: 18px;
}
.footer > div > div > div > div > div div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: right;
  margin: -9px auto;
  width: 7px;
  height: 7px;
  border-top: 2px solid white;
  border-left: 2px solid white;
}
.footer > div > div > div > div > div div {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.footer > div > div > div > div > div div.on {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
      transform: rotate(-135deg);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
.footer .group1 > div > div.on:nth-child(n + 2):nth-child(-n + 3) {
  height: 90px;
}
/* footer (box form) */
.footer > div > div:nth-child(2) {
  /* margin-left:4%; */
  width: 60%;
  background-color: #202020;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 16px;
}
.footer > div > div:nth-child(2) h2 {
  margin-left: 36px;
  padding-right: 26px;
  margin-top: 42px;
  font-size: 24px;
  line-height: 24px;
}

.footer > div > div:nth-child(2) p {
  margin-top: 10px;
  margin-left: 36px;
  padding-right: 26px;
  font-size: 14px;
  opacity: 0.6;
}
.footer form {
  margin-left: 36px;
  padding-right: 26px;
  margin-bottom: -80%;
}
textarea::-webkit-input-placeholder {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  vertical-align: middle;
}
textarea::-moz-placeholder {
  display: flex;
  justify-content: center;
  vertical-align: middle;
}
textarea:-ms-input-placeholder {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  vertical-align: middle;
}
textarea::-ms-input-placeholder {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  vertical-align: middle;
}
textarea::placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
}
textarea[value='input'] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Montserrat', sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
form textarea {
  width: 85%;
  height: 3%;
  margin-top: 18px;
  resize: none;
  background-color: #c4c4c4;
  border-radius: 8px;
}
form textarea:nth-child(3) {
  height: 20%;
}
.footer input[type='button'] {
  color: white;
  width: 93px;
  height: 29px;
  border-radius: 4px;
  background-color: #01810a;
  border: none;
  padding: 0;
  margin-top: 22px;
  margin-bottom: 46px;
}
/* ?alamat (footer) */
.footer > div > div:nth-child(3) p {
  width: 70%;
  position: relative;
  margin-left: 15%;
  font-weight: 500;
  line-height: 34px;
  font-size: 18px;
}
.footer > div > div:nth-child(3) ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 16px;
  margin-left: 15%;
}
.footer > div > div:nth-child(3) li:last-child {
  margin-top: 16px;
}
/* garis + privacy */
.footer > div:last-child {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer > div:last-child div {
  width: 100%;
  height: 2px;
  background-color: #c4c4c4;
  position: relative;
  margin-bottom: 64px;
}
.footer > div:last-child h3 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  opacity: 0.7;
  margin-bottom: 12px;
}
.footer > div:last-child p {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  opacity: 0.5;
  margin-bottom: 24px;
}
/* alert */
.alert {
  position: fixed;
  top: 10%;
  z-index: 2;
  left: -100%;
  right: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 0rem 1rem 1rem;
  color: white;
  background-color: rgb(255, 86, 86);
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
/* FOOTER CLOSE */
.alert.on {
  left: 0;
  right: 0;
}

/* SCREEN SETTING */

@media only screen and (max-width: 1230px) {
  nav {
    padding-left: 40px;
    padding-right: 40px;
  }
  nav ul:nth-child(2) {
    margin-left: 0;
  }
  nav ul {
    font-size: 16px;
  }
  .logo li:first-child {
    width: 50px;
  }
  .btn.Mb {
    display: inline-block;
  }
  .btn.Des {
    display: none;
  }
  /* .ourProCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 40px;
    margin-right: 40px;
  }
  .contOurPro {
    height: 56%;
  }
  .bImgSteel h3 {
    font-size: 24px;
  } */
}
@media only screen and (max-width: 1430px) {
  nav ul:nth-child(2) {
    margin-left: 0;
  }
  nav ul {
    font-size: 16px;
  }
  .logo li:first-child {
    width: 50px;
    margin-right: 4px;
  }
  .logo li {
    font-size: 16px;
  }
  .Bsic {
    overflow: hidden;
  }
  .footer > div {
    margin-left: 90px;
    margin-right: 90px;
  }
  .group1 {
    width: 38%;
  }
  .footer > div > div:nth-child(2) {
    width: 70%;
  }
  .footer form {
    margin-bottom: -300px;
  }
  .underL {
    left: -172px;
  }
  .underL.qua {
    left: -40px;
  }
  .underL.eff {
    left: 110px;
  }
}
@media only screen and (max-width: 940px), (max-width: 1230px) {
  .contSafety {
    margin-left: 60px;
  }
  .ourProCont {
    margin: 80px 0px;
  }
  .contOurPro {
    margin: 24px 0px;
  }
  .whyCU h1,
  .glbCont h1,
  .bsicDes {
    font-size: 40px;
  }

  .glbContent div {
    font-size: 36px;
  }
  .imgAndContent p {
    font-size: 24px;
  }
  /* footer */
  .footer > div {
    margin-left: 45px;
    margin-right: 45px;
    padding-top: 24px;
  }
  .footer .group1 > div > div {
    width: 100%;
    height: 28px;
  }
  .footer .group1 h3 {
    font-size: 16px;
  }
  .footer > div > div:nth-child(3) p {
    font-size: 14px;
    line-height: 24px;
    width: 80%;
  }
  .footer > div > div:nth-child(3) ul {
    font-size: 14px;
  }
  .footer .logo.Tab {
    font-size: 16px;
    padding-top: 80px;
    margin-left: 45px;
  }
  .footer > div > div:first-child {
    margin-top: 0;
  }
  .logo.Tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .logo.Mob {
    display: none;
  }
  .footer > div > div:nth-child(2) {
    margin-top: 20px;
    margin-left: -20px;
    overflow: hidden;
  }
  .footer > div > div:nth-child(3) {
    margin-top: 20px;
    margin-left: -20px;
  }
  .footer form {
    margin-bottom: -310px;
    padding-right: 16px;
  }
  .footer .group1 > div > div > ul {
    margin-left: 16px;
  }
  .footer > div:last-child h3 {
    font-size: 16px;
    line-height: 0px;
  }
  .footer > div:last-child p {
    font-size: 16px;
    line-height: 24px;
  }
}
@media only screen and (max-width: 560px) {
  .loader img {
    width: 20%;
  }
  .loader {
    z-index: 10;
  }
  nav {
    display: -ms-inline-grid;
    display: inline-grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: 16px;
    margin-right: 16px;
    padding: 0;
  }
  .nav.Active {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 20px;
  }
  .navDs .logo li:first-child {
    width: 100%;
    margin-right: 4px;
  }
  nav ul:nth-child(n + 2) {
    display: none;
  }
  nav ul:nth-child(n + 4) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .logo li {
    font-size: 16px;
  }
  .navMob {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .logo li:nth-child(2n + 2) {
    display: none;
  }

  .menuHam {
    width: 20px;
    z-index: 6;
    height: 1.5px;
    position: relative;
    margin-top: 50%;
    margin-bottom: 6px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    z-index: 6;
  }
  ul span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  ul span:first-child {
    top: 0px;
  }
  ul span:nth-child(2) {
    top: 5px;
  }
  ul span:nth-child(3) {
    top: -5px;
  }
  .menuHam.open span {
    background: #ff0101;
  }
  .menuHam.open span:nth-child(1) {
    top: 0px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
        transform: rotate(135deg);
  }
  .menuHam.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  .menuHam.open span:nth-child(3) {
    top: 0px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
        transform: rotate(-135deg);
  }
  .menu.open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
    position: fixed;
    top: 0;
    left: 50%;
    height: 100%;
    background: rgb(255, 255, 255);
    -webkit-box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
    z-index: 9;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }

  .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
    top: 0;
    position: fixed;
    left: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    z-index: 5;
  }
  .menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .menu .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    background: #01810a;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .menu .arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: 2vh;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgb(255, 255, 255);
    border-left: 2px solid rgb(255, 255, 255);
    cursor: pointer;
  }
  .menu .arrow {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .menu li {
    font-size: 16px;
    font-weight: 700;
    margin-left: 2vh;
  }
  .menu ul:first-child {
    margin-top: 1vh;
    margin-bottom: 5vh;
  }
  .menu li {
    margin-top: 5vh;
  }
  .menu ul:last-child {
    margin-top: 2vh;
    margin-bottom: 20%;
  }
  .menu a {
    color: black;
  }
  .menu .bottom div {
    width: 80%;
    margin-left: 2vh;
    height: 1px;
    background: black;
  }
  /* MENU SIDE MOBILE OPEN */
  .menuOption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .navSideMobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: white;
    z-index: 5;
    right: 0;
    position: fixed;
    top: 60%;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .navSideMobile.open {
    right: 50%;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .sideMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: white;
    overflow: hidden;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 8px 0px 0px 8px;
    z-index: 3;
    background-color: #01810a;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .sideMenu.Active.none {
    background-color: #01810a;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  .sideMenu.Active.none.foot {
    background-color: transparent;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  .sideMenu.Active {
    background-color: transparent;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  .navSideMobile .sideMenu p {
    z-index: 1;
    padding: 50% 0% 50% 0%;
    font-size: 14px;
    font-weight: 700;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
        transform: rotate(270deg);
  }
  /* MENU SIDE MOBILE CLOSE */

  /* all title font */
  .whyCU h1,
  .hOurDes,
  .glbCont h1,
  .bsicDes {
    font-size: 26px;
  }
  /* ATTENTION OPEN MOBILE*/
  .att {
    width: 100%;
  }
  .contAtt h1 {
    font-size: 24px;
    line-height: 34px;
  }
  /* WHY CHOOSE US  */
  .whyCU ul {
    margin-top: 20px;
    margin-bottom: 4px;
  }
  .whyCU h1 {
    margin-top: 60px;
    line-height: normal;
  }
  .whyCU li {
    font-size: 16px;
    line-height: normal;
  }
  .liS {
    margin-left: 24px;
    margin-right: 18px;
  }
  .liQ {
    margin-right: 18px;
  }
  .liE {
    margin-right: 24px;
  }
  .contSafety .Txt,
  .contSafety .TxtQ,
  .contSafety .TxtE {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 20px;
  }
  .contSafety {
    margin-left: 24px;
  }
  /* IMG WHYCHOOSEUS OPEN */
  /* GRUP SAFETY IMG */
  .oneS {
    background-image: url(Image/safetyMob.png);
    /* left: 0
            transition: 1s; */
  }
  .twoS {
    background-image: url(Image/safetyMob2.png);
  }

  /* GRUP QUALITY IMG */
  .oneQ {
    background-image: url(Image/qualityMob1.png);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .twoQ {
    background-image: url(Image/qualityMob2.png);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .thirdQ {
    background-image: url(Image/qualityMob3.png);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  /* GRUP EFFICIENCY IMG */
  .oneE {
    background-image: url(Image/efisienMob.png);
  }
  .twoE {
    background-image: url(Image/efisienMob2.png);
  }
  /* UNDER LINE */
  .underL {
    width: 50px;
    left: -85px;
  }
  .underL.eff {
    left: 75px;
  }
  .underL.qua {
    left: -11px;
  }
  /* DOTNYA */
  .dotClub {
    margin-top: 24px;
  }
  .arrowDot,
  .arrowDotQ,
  .arrowDotE {
    border-radius: 50px;
  }
  .arrowDot div,
  .arrowDotQ div,
  .arrowDotE div {
    margin: 9px;
    width: 8px;
    height: 8px;
  }
  .dot,
  .dotQ,
  .dotE {
    width: 14px;
    height: 14px;
  }
  /* OUR PRODUCT */
  .container-all-product {
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-grid-columns: 70%;
    grid-template-columns: 70%;
    gap: 2vw;
    margin: 60px 0px;
  }

  /* GLOBAL NETWORK COMPANY */
  .glbCont {
    margin-top: 80px;
    z-index: 1;
    position: relative;
    background-color: #262626;
    width: 100%;
  }
  .glbCont h1 {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 64px 14px 30px;
    text-align: center;
    color: white;
  }
  .glbImg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #262626;
  }
  .glbImg img {
    width: 95%;
    position: relative;
  }
  .glbContent {
    padding-left: 24px;
    padding-right: 24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #262626;
    margin-top: -111px;
    z-index: 1;
    position: relative;
  }
  .glbContent {
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .glbContent div {
    color: white;
    font-size: 16px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .glbContent ul {
    padding-bottom: 24px;
  }
  .glbContent div:first-child {
    margin-right: 10px;
  }
  .glbContent ul div:last-child {
    margin-left: 10px;
  }
  .underGlbImg {
    border-radius: 20%;
    margin-top: 8px;
    width: 59%;
    height: 2px;
  }
  .glbContent ul div:first-child .underGlbImg {
    background-color: #24549b;
  }
  .glbContent ul div:nth-child(2n) .underGlbImg {
    background-color: #a51313;
  }
  .glbContent ul div:last-child .underGlbImg {
    background-color: #3c9b24;
  }
  .glbContent button {
    margin-top: 16px;
  }
  /* ZOOM PLUS MIN */
  .zoomGroup {
    position: fixed;
    float: right;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    bottom: 50%;
    right: 0;
    z-index: 3;
  }
  .zoomGroup.Active.none {
    display: none;
  }
  .zoomGroup.Active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .zoomPlus button,
  .zoomMin button {
    background-color: #454545;
    border: none;
    width: 40px;
    height: 64px;
  }
  .zoomMin img,
  .zoomPlus img {
    width: 40%;
  }
  .zoomPlus button {
    border-radius: 8px 0px 0px 8px;
    -webkit-box-shadow: 0px 4px 25px rgba(255, 255, 255, 0.13);
            box-shadow: 0px 4px 25px rgba(255, 255, 255, 0.13);
  }
  .zoomMin button {
    border-radius: 8px 0px 0px 8px;
    -webkit-box-shadow: 0px 4px 25px rgba(255, 255, 255, 0.13);
            box-shadow: 0px 4px 25px rgba(255, 255, 255, 0.13);
  }
  .zoomBtn:active {
    border: 1px solid white;
    background-color: transparent;
  }
  .contGlbImgMob {
    background-color: #262626;
  }
  .contGlbImgMob {
    overflow: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: -130px;
    position: relative;
  }
  .glbImg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  svg {
    width: 95%;
  }
  /* CIRCLE CIRCLE CIRCLE */

  /* SOME BASIC METHOD */
  .Bsic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 80px;
  }
  .bsicDes {
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* border: 1px solid red; */
    padding: 0px 8px;
    line-height: 36px;
    margin-bottom: 24px;
  }
  h1.bsicDes {
    text-align: center;
  }
  .ListBsic {
    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 50px;
  }
  .Bsic ul {
    margin-top: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .Bsic ul li {
    font-size: 18px;
    font-weight: 600px;
  }
  .Bsic li:nth-child(n + 2) {
    opacity: 0.3;
  }
  .Bsic ul li:nth-child(2) {
    margin-left: 8px;
    margin-right: 8px;
  }
  .oI div,
  .Dl div,
  .iP div {
    margin-left: 0px;
    width: 100%;
  }
  /* underLine */
  .underLB {
    width: 50px;
    height: 4px;
    background-color: #01810a;
    position: relative;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    left: 0px;
  }
  .underLBDes {
    display: none;
  }
  /* IMG BASCI METHOD */
  .imgAndContent p > span {
    font-size: 16px;
  }
  .imgAndContent p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .imgAndContent {
    overflow: hidden;
    position: relative;
  }
  .imgAllOrder {
    z-index: 4;
  }
  .imgAllDelivery {
    z-index: 3;
  }
  .imgAllPackaging {
    z-index: 2;
  }
  .Dl div img {
    margin-bottom: 16px;
  }
  .oI,
  .iP,
  .Dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-left: 24px;
    margin-right: 24px;
  }
  .imgAndContent > div {
    background-color: white;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: relative;
  }
  .imgAndContent > div:nth-child(n + 2) {
    display: none;
  }

  .imgAndContent img {
    width: 47%;
    border-radius: 6px;
    margin-right: 18px;
  }
  .dotBasic {
    width: 14px;
    height: 14px;
  }
  .arrowDotBasic div {
    margin: 9px;
    width: 8px;
    height: 8px;
  }
  .contGlbImgMob .glbImg svg {
    width: 95%;
  }
  .contGlbImgMob {
    width: 100%;
    height: auto;
  }
  .contGlbImgDes {
    display: none;
  }
  .red.on {
    -webkit-animation-name: cired;
            animation-name: cired;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
  }
  .blue.on {
    -webkit-animation-name: ciblue;
            animation-name: ciblue;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
  }
  .green.on {
    -webkit-animation-name: cigreen;
            animation-name: cigreen;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
  }
  @-webkit-keyframes cired {
    10% {
      fill: #a51313;
    }
    40% {
      fill: #a51313;
    }
    100% {
      fill: white;
    }
  }
  @keyframes cired {
    10% {
      fill: #a51313;
    }
    40% {
      fill: #a51313;
    }
    100% {
      fill: white;
    }
  }
  @-webkit-keyframes ciblue {
    10% {
      fill: #24549b;
    }
    40% {
      fill: #24549b;
    }
    100% {
      fill: white;
    }
  }
  @keyframes ciblue {
    10% {
      fill: #24549b;
    }
    40% {
      fill: #24549b;
    }
    100% {
      fill: white;
    }
  }
  @-webkit-keyframes cigreen {
    10% {
      fill: #3c9b24;
    }
    40% {
      fill: #3c9b24;
    }
    100% {
      fill: white;
    }
  }
  @keyframes cigreen {
    10% {
      fill: #3c9b24;
    }
    40% {
      fill: #3c9b24;
    }
    100% {
      fill: white;
    }
  }
  /* FOOTER OPEN */
  .footer {
    background-color: #4b4b4b;
    margin-top: 0px;
  }
  .footer > div {
    margin-left: 24px;
    margin-right: 24px;
    padding-top: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: inherit;
        -ms-flex-pack: inherit;
            justify-content: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer .navMob {
    color: white;
  }
  .logo.Mob {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .logo.Tab {
    display: none;
  }

  /* (footer) qna */

  .group1 .logo li:first-child {
    width: 50px;
  }
  .footer .group1 li.navMob {
    font-size: 14px;
    font-weight: 600;
  }
  .footer h3,
  .footer li {
    color: white;
  }
  .footer .group1 h3 {
    font-size: 16px;
    font-weight: 600;
  }
  .footer li {
    font-size: 14px;
    font-weight: 500;
  }
  .footer li:nth-child(2) {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .footer > div > div > div > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 8px;
  }
  .footer .group1 > div > div {
    overflow: hidden;
    height: 24px;
    border-bottom: 1px solid white;
    width: 100%;
    margin-top: 18px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    cursor: pointer;
  }
  .footer .logo {
    padding-top: 56px;
  }
  .footer > div > div > div {
    height: 100%;
    margin-top: 18px;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid whitesmoke;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .footer > div > div > div.on {
    height: 104px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .footer > div > div:first-child {
    margin-top: 32px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
  }
  .footer > div > div > ul > li {
    margin-top: 4px;
  }
  .footer .group1 > div > div > div > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: right;
    margin: -9px auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid white;
    border-left: 2px solid white;
  }
  .footer .group1 > div > div > div > div {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .footer .group1 > div > div > div > div.on {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
        transform: rotate(-135deg);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }

  /* (footer) box form */

  .footer > div > div:nth-child(2) {
    margin-top: 68px;
    margin-left: 0px;
    width: 100%;
    height: 100%;
    background-color: #202020;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer > div:first-child > div:nth-child(2) h2 {
    font-size: 24px;
    color: white;
    margin-top: 46px;
  }
  .footer > div:first-child > div:nth-child(2) p {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 2px;
    font-weight: 500;
    color: white;
    opacity: 0.8;
  }
  .footer form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0%;
    padding-right: 0px;
  }
  form textarea {
    resize: none;
    margin-top: 16px;
    width: 95%;
    height: auto;
    border: none;
    height: 33px;
    background-color: #c4c4c4;
    border-radius: 8px;
  }
  textarea::-webkit-input-placeholder {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    vertical-align: middle;
  }
  textarea::-moz-placeholder {
    display: flex;
    justify-content: center;
    vertical-align: middle;
  }
  textarea:-ms-input-placeholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    vertical-align: middle;
  }
  textarea::-ms-input-placeholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    vertical-align: middle;
  }
  textarea::placeholder {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    vertical-align: middle;
  }
  textarea[value='input'] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Montserrat', sans-serif;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 20px;
    padding-top: 16px;
    vertical-align: middle;
  }
  textarea:nth-child(3) {
    height: 140px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .footer input[type='button'] {
    color: white;
    width: 93px;
    height: 29px;
    border-radius: 4px;
    background-color: #01810a;
    border: none;
    padding: 0;
    margin-top: 22px;
    margin-bottom: 46px;
  }
  .footer > div > div ~ div:nth-child(3) p,
  .footer > div > div ~ div:nth-child(3) h2,
  form {
    margin-left: 24px;
    margin-right: 40px;
  }
  /* (footer) Alamat*/
  .footer > div:first-child > div:nth-child(3) {
    margin-top: 86px;
  }
  .footer > div:first-child > div:nth-child(3) p {
    color: white;
    width: 48%;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    margin-left: 0%;
  }
  .footer > div:first-child > div:nth-child(3) ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: 0%;
  }
  .footer > div:first-child > div:nth-child(3) ul li {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    margin-top: 16px;
  }
  .footer > div > div:nth-child(3) ul {
    margin-left: 24px;
  }
  /* (footer) garis */
  .footer > div:last-child div {
    width: 100%;
    margin: 32px -24px 32px -24px;
    height: 1px;
    position: relative;
    background-color: white;
  }
  /* (footer) last */
  .footer > div:last-child h3,
  .footer > div:last-child p {
    text-align: center;
    color: white;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    opacity: 0.7;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  .footer > div:last-child p {
    font-size: 8px;
    opacity: 0.5;
    padding-bottom: 24px;
  }
  /* FOOTER CLOSE */
}
@media only screen and (max-width: 400px) {
  nav {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .logo li {
    font-size: 10.5px;
  }
  .navDs .logo li:first-child {
    width: 40px;
    margin-right: 4px;
  }
  .logo {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer .group1 li.navMob {
    font-size: 10px;
  }
}

@media only screen and (max-width: 1000px) and (min-width: 560px) {
  .loader img {
    width: 10%;
  }
  .loader {
    z-index: 10;
  }
  nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: 16px;
    margin-right: 16px;
    padding: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .nav.Active {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 20px;
  }
  .navDs .logo li:first-child {
    width: 60px;
    margin-right: 4px;
  }
  nav ul:nth-child(n + 2) {
    display: none;
  }
  nav ul:nth-child(n + 4) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .logo li {
    font-size: 24px;
  }
  .navMob {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .logo li:nth-child(2n + 2) {
    display: none;
  }

  .menuHam {
    width: 20px;
    z-index: 6;
    height: 1.5px;
    position: relative;
    margin-top: 50%;
    margin-bottom: 6px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    -webkit-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    z-index: 6;
  }
  ul span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  ul span:first-child {
    top: 0px;
  }
  ul span:nth-child(2) {
    top: 5px;
  }
  ul span:nth-child(3) {
    top: -5px;
  }
  .menuHam.open span {
    background: #ff0101;
  }
  .menuHam.open span:nth-child(1) {
    top: 0px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
        transform: rotate(135deg);
  }
  .menuHam.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  .menuHam.open span:nth-child(3) {
    top: 0px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
        transform: rotate(-135deg);
  }
  .menu.open {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
    position: fixed;
    top: 0;
    left: 50%;
    height: 100%;
    background: rgb(255, 255, 255);
    -webkit-box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.25);
    z-index: 9;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }

  .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
    top: 0;
    position: fixed;
    left: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    z-index: 5;
  }
  .menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .menu .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    background: #01810a;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .menu .arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: 2vh;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgb(255, 255, 255);
    border-left: 2px solid rgb(255, 255, 255);
    cursor: pointer;
  }
  .menu .arrow {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .menu li {
    font-size: 24px;
    font-weight: 700;
    margin-left: 2vh;
  }
  .menu ul:first-child {
    margin-top: 1vh;
    margin-bottom: 5vh;
  }
  .menu li {
    margin-top: 5vh;
  }
  .menu ul:last-child {
    margin-top: 2vh;
    margin-bottom: 20%;
  }
  .menu a {
    color: black;
  }
  .menu .bottom div {
    width: 80%;
    margin-left: 2vh;
    height: 1px;
    background: black;
  }
  /* MENU SIDE MOBILE OPEN */
  .menuOption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .navSideMobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: white;
    z-index: 5;
    right: 0;
    position: fixed;
    top: 60%;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .navSideMobile.open {
    right: 50%;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .sideMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: white;
    overflow: hidden;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 8px 0px 0px 8px;
    z-index: 3;
    background-color: #01810a;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  .sideMenu.Active.none {
    background-color: #01810a;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  .sideMenu.Active.none.foot {
    background-color: transparent;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  .sideMenu.Active {
    background-color: transparent;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  .navSideMobile .sideMenu p {
    z-index: 1;
    padding: 50% 0% 50% 0%;
    font-size: 14px;
    font-weight: 700;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
        transform: rotate(270deg);
  }
  /* MENU SIDE MOBILE CLOSE */
  /* WHY CHOOSE US */
  .whyCU h1 {
    margin-top: 80px;
  }
  .contSafety {
    margin-left: 40px;
  }
  .whyCU li:nth-child(2) {
    margin: 0px 40px;
  }
  .underL {
    left: -201px;
  }
  .underL.qua {
    left: -28px;
  }
  .underL.eff {
    left: 144px;
  }
  /* OUR PRODUCT */
  .oI div,
  .Dl div,
  .iP div {
    margin-left: 50px;
  }
  .imgAndContent p {
    line-height: 40px;
  }
  /* GLB CONTENT */
  .glbCont h1 {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 50px 14px 50px;
  }
  .glbContent div {
    font-size: 26px;
  }
  /* our product */
  .container-all-product {
    -ms-grid-columns: 40% 40%;
    grid-template-columns: 40% 40%;
  }
  /* some basic */
  .Bsic ul li:nth-child(2) {
    margin: 0px 40px;
  }
}
@media only screen and (height: 1366px) {

  .bImgSteel h3 {
    font-size: 32px;
  }
  .bImgSteel p {
    font-size: 20px;
    line-height: 35px;
  }
  .glbCont {
    margin-top: 0px;
  }
  .underL {
    top: -3vh;
  }
}